<template>
  <div class="contain-report">
    <div class="report-title">修改密码</div>
    <div class="report-form">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="medium">
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input placeholder="请输入旧密码" v-model="form.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <el-input placeholder="请输入新密码" v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="checkPassword">
          <el-input placeholder="请再次输入新密码" v-model="form.checkPassword"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 50px auto;display: flex;justify-content: center">
      <el-button type="primary" @click="change('form')">更改信息</el-button>
    </div>
  </div>
</template>

<script>
import {passData} from "../../api/student";

export default {
  data() {
    // 验证确认密码
    let checkRePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.newPassword) {
        console.log(value)
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      userInfo: {},
      form: {
        checkPassword: "",
        newPassword: "",
        oldPassword: "",
        userId: null
      },
      rules: {
        oldPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur"},
        ],
        newPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur"},
        ],
        checkPassword: [{required: true, trigger: 'blur', validator: checkRePass}],
      },
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('user'))
    this.form.userId = this.userInfo.id
  },
  methods: {
    change(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          passData(this.form).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message.success('修改密码成功,请重新登录')
              sessionStorage.clear()
              setTimeout(() => {
                this.$router.go(0)
              }, 2000)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>

<style scoped lang="less">
.contain-report {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .report-title {
    font-size: 22px;
    color: #666;
  }

  .report-form {
    width: 50%;
    height: 200px;
    margin: 0 auto;
  }
}
</style>
